<template>
  <div class="home">
    <!-- 顶部信息导航 -->
    <div class="nav-top clearfix">
      <div class="clearfix nav-logo fl">
        <div class="logo fl">
          <img class="img-scale" src="../assets/images/logo.png" alt="" />
        </div>
        <div class="company fl">广东海川工业物联网</div>
      </div>
      <div class="fr critical">
        <div
          class="item fl clearfix"
          v-for="(iten, index) in navCritical"
          :key="index"
        >
          <el-badge type="danger" :max="99" :value="iten.quantity">
            <i :class="iten.iocn" class="iocn fl"></i>
            <div class="authName fl">
              {{ iten.authName }}
            </div>
          </el-badge>
        </div>
        <div class="manage fl clearfix">
          <div class="head fl">
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            >
            </el-avatar>
          </div>
          <div class="user fl">管理员名称</div>
          <div class="secede fl" @click="Quit">退出</div>
        </div>
      </div>
      <!-- 顶部信息导航end -->
    </div>
    <div class="clearfix main">
      <!-- 左边导航栏 -->
      <div class="fl " :class="mastery ? 'nav-main' : 'nav-main-active'">
        <div class="pack">
          <i
            class="iconfont "
            :class="mastery ? 'icon-caidan-zhankai' : 'icon-caidan-shouqi'"
            @click="Control"
          >
          </i>
        </div>
        <el-menu
          :unique-opened="true"
          :router="true"
          :collapse="mastery"
          class="vertical"
           default-active ="110"
        >
          <el-submenu
            v-for="item in navigation"
            :key="item.id"
            :index="String(item.id)"
           
          >
            <template slot="title">
              <i class="fa icon-bar icon-box" :class="item.icon"></i>
              <span slot="title">{{ item.authName }}</span>
            </template>
            <el-menu-item
              :route="{ name: tab.name }"
              v-for="tab in item.children"
              :key="tab.id"
              :index="String(tab.id)"
            >
              <template slot="title">
                <i class="fa icon-bar" :class="tab.icon"></i>
                <span slot="title">{{ tab.authName }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
      <div
        class="fl "
        :class="mastery ? 'content-main' : 'content-main-active'"
      >
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
// 引入样式
import "@/assets/font/iconfont.css";
export default {
  data() {
    return {
      navCritical: [
        {
          authName: "信息",
          iocn: "el-icon-message",
          quantity: "1",
        },
      ],
      isCollapse: true,
      navigation: [
        {
          id: 101,
          authName: "实时监控",
          path: "",
          name: "TrueTime",
          icon: "fa-desktop",
          pid: 0,
          children: [
            {
              id: 110,
              authName: "生产监控",
              path: "monitoring",
              name: "Monitoring",
              icon: "fa-area-chart",
              pid: 101,
            },
          ],
        },
        {
          id: 102,
          authName: "数据报表",
          name: "Survey",
          path: "",
          icon: "fa-database",
          pid: 0,
          children: [
            {
              id: 111,
              authName: "生产报表",
              path: "yield",
              name: "Yield",
              icon: "fa-bar-chart",
              pid: 102,
            },
          ],
        },
        {
          id: 103,
          authName: "生产计划",
          name: "Promote",
          path: "",
          icon: "fa-calendar-check-o",
          pid: 0,
          children: [
            {
              id: 112,
              authName: "生产日历",
              path: "calendar",
              name: "Calendar",
              icon: "fa-calendar",
              pid: 103,
            },

            {
              id: 113,
              authName: "计划安排",
              path: "arrange",
              name: "Arrange",
              icon: "fa-clipboard",
              pid: 103,
            },
            {
              id: 114,
              authName: "计划详情",
              path: "details",
              name: "Details",
              icon: "fa-file-text-o",
              pid: 103,
            },
          ],
        },
        {
          id: 104,
          authName: "产品录入",
          name: "Promote",
          path: "",
          icon: "fa-cubes",
          pid: 0,
          children: [
            {
              id: 115,
              authName: "产品详情",
              path: "product",
              name: "Product",
              pid: 104,
              icon: "fa-file-o",
            },
            {
              id: 116,
              authName: "扫码录入",
              pid: 104,
              icon: "fa-barcode",
              path: "entering",
              name: "Entering",
            },

            {
              id: 117,
              authName: "产品列表",
              pid: 104,
              icon: "fa-file-text",
              path: "detailed",
              name: "Detailed",
            },
          ],
        },
        {
          id: 105,
          authName: "用户管理",
          name: "Manage",
          path: "",
          pid: 0,
          icon: "fa-users",
          children: [
            {
              id: 118,
              authName: "用户列表",
              path: "user",
              name: "User",
              pid: 105,
              icon: "fa-user-circle-o",
            },
            {
              id: 119,
              authName: "权限管理",
              path: "rights",
              name: "Rights",
              pid: 105,
              icon: "fa-sitemap",
            },
          ],
        },
        {
          id: 106,
          authName: "工作上报",
          path: "",
          name: "Rights",
          icon: "fa-upload",
          pid: 0,
          children: [
            {
              id: 120,
              authName: "仓库出入",
              path: "rights",
              name: "Rights",
              pid: 106,
              icon: "fa-sitemap",
            },

            {
              id: 121,
              authName: "异常情况",
              path: "rights",
              name: "Rights",
              pid: 106,
              icon: "fa-sitemap",
            },
            {
              id: 122,
              authName: "退料报废",
              path: "rights",
              name: "Rights",
              pid: 106,
              icon: "fa-sitemap",
            },
            {
              id: 123,
              authName: "出勤人数",
              path: "rights",
              name: "Rights",
              pid: 106,
              icon: "fa-sitemap",
            },
          ],
        },
      ],
      afold: false,
      mastery: false,
    };
  },
  created(){
     this.$router.push({ name: "Monitoring" });
  },
  methods: {
    // 退出功能
    Quit() {
      this.$router.push({ name: "Login" });
      localStorage.setItem("token", "");
    },
    // 展开和收起
    Control() {
      if (this.mastery == true) {
        this.mastery = false;
      } else {
        this.mastery = true;
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/home.less";
</style>
